<template>
	<view class="site">
		<view class="inp">
			<view class="inp1">
				
				<view class="item">
					<view class="item-name">姓名：</view>
					<input type="text" placeholder="请填写户主姓名" v-model="sitelist.name">
				</view><view class="item">
					<view class="item-name">手机号码：</view>
					<input type="number"  placeholder="请填写手机号码" v-model="sitelist.num">
				</view><view class="item">
					<view class="item-name">所在地区：</view>
					<view class="sites">
						<AddressPicker @change="change" :level="3">{{sitelist.site}}</AddressPicker>
					</view>
				</view><view class="item">
					<view class="item-name">详细地址：</view>
					<input type="text" placeholder="街道,小区,门牌号" v-model="sitelist.value">
				</view>
				
			
			</view>
		</view>
	
		<view class="but" @tap="Setsite">保存</view>
	</view>
</template>

<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				sitelist:{
					id:'',
					name:'',
					num:"",
					site:"请选择地址>",
					value:"",
				}
			};
		},
		
		components:{
			AddressPicker
		},
		
		methods:{
			change(index){
				let newarr = ''
			index.data.forEach(v=>{
				if(newarr===v.name) return
				newarr += v.name
			})
				this.$set(this.sitelist,'site',newarr)
			},
			}
	}
</script>

<style lang="less" scoped>
.site{
	display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
	.inp{
		display: flex;
		justify-content: center;
		// align-items: center;
	    width: 710rpx;
		height: 330rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
}	
.inp1{
    width: 670rpx;
	height: 330rpx;	
	// background-color: aqua;
	}
.item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 670rpx;
	height: 82rpx;
	border-bottom: 1rpx  solid #f5f5f5;
	 .item-name{
		 font-size: 28rpx;
		 font-weight: 400;
	 }
	 input{
		width: 440rpx;
		font-size: 26rpx;
	 }
	 .sites{
		 width: 440rpx;
		 font-size: 26rpx;
		 color: #808080;
	 }
}
.item-switch{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	border-radius: 10rpx;
	width: 710rpx;
	height: 80rpx;
	background-color: #fff;
	.item-name{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
	}
}
.but{
	width: 710rpx;
	height: 80rpx;
	color: #fff;
	border-radius: 10rpx;
	text-align: center;
	line-height: 80rpx;
	margin-top: 200rpx;
	background-color: #00c783;
}
</style>
